<template>
	<view class="container">
		<view class="page-body">
			<view class="page user">
				<view class="header card-pd">

					<view class="info-box">
						<view class="page-section-title">发送二维码推荐给朋友</view>
						<image class="image" v-if="img != ''" :src="img" :style="{ width:'250px', height: '250px' }" />
						<view class="invite-code">{{ inviteCode }}</view>
						<view class="title">我的邀请码</view>
					</view>
				</view>
			</view>
			<view class="page-section" style="margin: 0px 20px;width: auto;">
				<button type="primary" @tap="saveBitmap" class="share">分享给好友</button>
			</view>
			
			<view class="tip">温馨提示：</view>
			<view class="tip1">1：手机截屏并保存到相册，微信转发给好友</view>
			<view class="tip1">2：点击【分享给好友】 复制推广链接，粘贴发送给微信好友</view>
		</view>
	</view>
</template>
<script>
	import QR from "../qrcode/qrcode.js";
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				title: '二维码生成',
				showClearIcon: false,
				img: '',
				qrval:''
			}
		},
		onLoad() {
			this.creatQrcode();

		},
		computed: mapState(['inviteCode', 'wxShareUrl']),
		methods: {
			creatQrcode: function() {
				
				this.qrval = this.wxShareUrl + this.inviteCode;
				
				let img = QR.createQrCodeImg(this.qrval, {
					size: parseInt(250) //二维码大小
				})
				this.img = img;

			},
			saveBitmap:function () {
				var data = this.qrval;
				if (data.length === 0) {
					uni.showModal({
						title: '设置剪贴板失败',
						content: '内容不能为空',
						showCancel: false
					})
				} else {
					uni.setClipboardData({
						data: data,
						success: () => {
							uni.showModal({
								content: '复制邀请链接成功，发送给好友一起来玩',
								showCancel: false
							})
						},
						fail: () => {
							uni.showModal({
								content: '储存数据失败!',
								showCancel: false
							})
						}
					});
				}
				
				
            }
           
           
		},

	}
</script>

<style>
	@import "../../common/icon.css";

	.page-section {
		margin-bottom: 20upx;
	}
    .page-section-title{
		font-size: 38upx;
		color: #DD524D;
	}
	page {
		background: url(…sAAAh3AACgEm5OBQAA4Q4AAExCuAMAgHAHAACm8H8BBgA4nL0gscohQgAAAABJRU5ErkJggg==) no-repeat bottom #e74a45;

	}
    .tip,.tip1{
		color: white;
		padding: 10upx 25upx;
	}
	
	.page-body {
		padding-bottom: 40upx;
	}

	.uni-list-cell {
		padding: 0 30upx;
	}

	.uni-input {
		flex: 1;
	}

	.uni-icon {
		color: #999;
	}

	.user .header {
		height: auto;
		background-size: contain;
		position: relative;
		color: #ffffff;
		margin-bottom: 10px;
	}

	.user .header .top {
		position: absolute;
		top: 20px;
		right: 15px;
	}

	.user .header .info-box {
		padding: 0 15px;
		text-align: center;
		background-color: #ffffff;
		border-radius: 18px;
		-webkit-box-shadow: 0 2px 5px #d2413c;
		box-shadow: 0 2px 5px #d2413c;
	}

	
	.user .header .sign img {
		width: 20px;
		padding-right: 2px;
	}

	.user .header .sign .tips-point {
		position: absolute;
		right: 5px;
		top: 5px;
	}

	.user .header i {
		font-size: 20px;
	}

	.user .header .photo {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-size: cover;
		margin-bottom: 0.3125rem;
		border: 4px solid #ffffff;
		-webkit-box-shadow: 0 2px 5px rgba(241, 74, 69, 0.67);
		box-shadow: 0 2px 5px rgba(241, 74, 69, 0.67);
		position: absolute;
		top: 80px;
		left: 50%;
		margin-left: -50px;
		z-index: 1000;
	}

	.user .header .money {
		line-height: 1.8;
	}

	.invite-code {
		color:#000000;
		font-size:60upx;
		font-weight: 400;
		
	}

	.title {
		color: #666666;
		
	}
</style>
